<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类 - 徐理念Blog</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="/script/jquery-3.6.0.min.js">  </script>
    <style>
        .category-tree ul {
            list-style-type: none;
            padding-left: 20px;
        }

        .category-tree > ul {
            padding-left: 0;
        }

        .category-item {
            margin-bottom: 8px;
        }

        .category-icon {
            margin-right: 8px;
        }

        .category-card {
            transition: transform 0.2s;
        }

        .category-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
<!-- 头部区域 -->
<header class="blog-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <!-- 左侧标题 -->
            <div class="blog-title">
                <h3 class="mb-0">徐理念Blog</h3>
            </div>

            <!-- 中间导航链接 -->
            <nav class="d-none d-md-block">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="/blogHome"><i class="bi bi-house-door"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/articleList"><i class="bi bi-card-text"></i> 全部动态</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/categories"><i class="bi bi-folder"></i> 分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/tagList"><i class="bi bi-tags"></i> 标签</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/articleManage"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </li>
                </ul>
            </nav>

            <!-- 右侧用户信息 -->
            <div class="user-info">
                <div class="dropdown">
                    <a class="d-flex align-items-center text-decoration-none dropdown-toggle"
                       href="#" role="button" data-bs-toggle="dropdown">
                        <div class="user-avatar" th:text="用户">U</div>
                        <span class="d-none d-md-inline" th:text="徐理念">用户名</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/profile"><i class="bi bi-person"></i> 个人资料</a></li>
                        <li><a class="dropdown-item" href="/settings"><i class="bi bi-gear"></i> 设置</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="main-content">
    <div class="container">
        <!-- 移动端导航菜单 -->
        <div class="d-md-none mb-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="/" class="btn btn-outline-primary"><i class="bi bi-house-door"></i> 首页</a>
                        <a href="/articleList" class="btn btn-outline-primary"><i class="bi bi-card-text"></i> 全部动态</a>
                        <a href="/categories" class="btn btn-outline-primary active"><i class="bi bi-folder"></i> 分类</a>
                        <a href="/tags" class="btn btn-outline-primary"><i class="bi bi-tags"></i> 标签</a>
                        <a href="/articleManage" class="btn btn-outline-primary"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="row">
            <!-- 分类树 -->
            <div class="col-lg-2">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">分类目录</h4>
                    </div>
                    <div class="card-body">
                        <div class="category-tree">
                            <ul th:if="${categoryTree != null and not #lists.isEmpty(categoryTree)}">
                                <li th:each="category : ${categoryTree}" class="category-item">
                                    <div>
                                        <a th:href="@{/categoryArticle(id=${category.id})}" class="text-decoration-none">
                                            <i th:class="${category.icon ?: 'bi bi-folder'}" class="category-icon"></i>
                                            <strong th:text="${category.name}">分类名称</strong>
                                        </a>
                                        <input id="categoryArtNumId" type="hidden" th:value="${category.id}">
                                        <span id="categoryArtNum" class="badge bg-secondary ms-2" th:text="${#lists.size(category.children)}">0</span>
                                    </div>
                                    <!-- 二级分类 -->
                                    <ul th:if="${category.children != null and not #lists.isEmpty(category.children)}">
                                        <li th:each="child : ${category.children}" class="category-item">
                                            <div>
                                                <a th:href="@{/categoryArticle(id=${child.id})}" class="text-decoration-none">
                                                    <i th:class="${child.icon ?: 'bi bi-folder'}" class="category-icon"></i>
                                                    <span th:text="${child.name}">二级分类</span>
                                                </a>
                                            </div>
                                            <!-- 三级分类 -->
                                            <ul th:if="${child.children != null and not #lists.isEmpty(child.children)}">
                                                <li th:each="grandchild : ${child.children}" class="category-item">
                                                    <div>
                                                        <a th:href="@{/categoryArticle(id=${grandchild.id})}" class="text-decoration-none">
                                                            <i th:class="${grandchild.icon ?: 'bi bi-folder'}" class="category-icon"></i>
                                                            <span th:text="${grandchild.name}">三级分类</span>
                                                        </a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <div th:if="${categoryTree == null or #lists.isEmpty(categoryTree)}" class="text-center py-3">
                                <p class="text-muted">暂无分类</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分类列表 -->
            <div class="col-lg-10">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">所有分类</h4>

                    <!--分类管理 只添加一级分类，其余分类管理点击相应目录即可管理该目录及添加其对应的子目录-->
                        <span id="articleCount" class="ms-auto me-3 text-muted">分类管理:</span>

                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="addRootCategory()">
                                <i class="bi bi-plus"></i> 添加一级分类
                            </button>
                        </div>
                    </div>
                    <!-- 添加一级分类模态框 -->
                    <div class="modal fade" id="addRootCategoryModal" tabindex="-1" aria-labelledby="addRootCategoryModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="addRootCategoryModalLabel">添加一级分类</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form id="addRootCategoryForm">
                                        <div class="mb-3">
                                            <label for="addRootCategoryName" class="form-label">分类名称 *</label>
                                            <input type="text" class="form-control" id="addRootCategoryName" required>
                                        </div>
                                        <div class="mb-3">
                                            <label for="addRootCategoryIcon" class="form-label">图标类名</label>
                                            <input type="text" class="form-control" id="addRootCategoryIcon" placeholder="例如: bi bi-folder">
                                            <div class="form-text">使用Bootstrap Icons图标类名</div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="addRootCategoryDescription" class="form-label">分类描述</label>
                                            <textarea class="form-control" id="addRootCategoryDescription" rows="3"></textarea>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" onclick="saveNewRootCategory()">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <!-- 分类卡片列表 -->
                        <div class="row" th:if="${categoryPage != null and not #lists.isEmpty(categoryPage.records)}">
                            <div th:each="category : ${categoryPage.records}" class="col-md-6 mb-4">
                                <div class="card category-card h-100">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <h5 class="card-title">
                                                    <i th:class="${category.icon ?: 'bi bi-folder'}" class="me-2"></i>
                                                    <span th:text="${category.name}">分类名称</span>
                                                </h5>
                                                <p class="card-text text-muted" th:text="${category.description ?: '暂无描述'}">分类描述</p>
                                            </div>
                                            <span class="badge bg-primary" th:if="${category.parentId == 0}">顶级</span>
                                            <span class="badge bg-secondary" th:unless="${category.parentId == 0}">子类</span>
                                        </div>

                                        <div class="mt-3">
                                            <small class="text-muted">
                                                <i class="bi bi-calendar"></i>
                                                创建时间: <span th:text="${#temporals.format(category.createTime, 'yyyy-MM-dd')}">创建时间</span>
                                            </small>
                                        </div>
                                    </div>

                                    <div class="card-footer bg-transparent">
                                        <div class="d-flex justify-content-between">
                                            <small class="text-muted">
                                                ID: <span th:text="${category.id}">分类ID</span>
                                            </small>
                                            <div>
                                                <a th:href="@{/categoryArticle(id=${category.id})}" class="btn btn-sm btn-outline-primary">查看文章</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 无分类时显示 -->
                        <div th:if="${categoryPage == null or #lists.isEmpty(categoryPage.records)}" class="text-center py-5">
                            <i class="bi bi-folder" style="font-size: 3rem; color: #ccc;"></i>
                            <h5 class="mt-3">暂无分类</h5>
                            <p class="text-muted">还没有创建任何分类</p>
                        </div>

                        <!-- 分页组件 -->
                        <div class="pagination-container" th:if="${categoryPage != null and categoryPage.pages > 1}">
                            <nav aria-label="分类分页">
                                <ul class="pagination">
                                    <!-- 上一页 -->
                                    <li class="page-item" th:classappend="${categoryPage.current == 1} ? 'disabled'">
                                        <a class="page-link"
                                           th:href="@{/categories(pageNum=${categoryPage.current - 1})}"
                                           aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>

                                    <!-- 页码 -->
                                    <li class="page-item"
                                        th:each="i : ${#numbers.sequence(1, categoryPage.pages)}"
                                        th:classappend="${i == categoryPage.current} ? 'active'">
                                        <a class="page-link" th:href="@{/categories(pageNum=${i})}" th:text="${i}">1</a>
                                    </li>

                                    <!-- 下一页 -->
                                    <li class="page-item" th:classappend="${categoryPage.current == categoryPage.pages} ? 'disabled'">
                                        <a class="page-link"
                                           th:href="@{/categories(pageNum=${categoryPage.current + 1})}"
                                           aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 底部区域 -->
<footer class="blog-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>联系我</h5>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fab fa-qq me-2"></i>
                        <strong>QQ:</strong> <span>123456789</span>
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-envelope me-2"></i>
                        <strong>Email:</strong> <span>example@example.com</span>
                    </li>
                    <li>
                        <i class="bi bi-chat-dots me-2"></i>
                        <strong>微信:</strong> <span>xuln_blog</span>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>关于博客</h5>
                <p>这是一个个人技术博客，分享编程经验、技术心得和生活感悟。</p>
            </div>
            <div class="col-md-4">
                <h5>友情链接</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-decoration-none">GitHub</a></li>
                    <li><a href="#" class="text-decoration-none">SegmentFault</a></li>
                    <li><a href="#" class="text-decoration-none">掘金</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="text-center">
            <p class="mb-0">&copy; 2022 徐理念Blog. All rights reserved.</p>
        </div>
    </div>
</footer>

<script src="/script/jquery-3.6.0.min.js"></script>

<script>

    $(function() {
        var categoryArtNumId = $('#categoryArtNumId').val();
        $.ajax({
            type: 'GET',
            url: '/getCategoryArtNum',
            data: {
                categoryId: categoryArtNumId
            },
            success: function(data) {
                if (data.code === 200) {
                    $('#categoryArtNum').text(data.data);
                }
            }
        });

    });
    // 添加一级分类
    function addRootCategory() {

        // 清空表单
        $('#addRootCategoryForm')[0].reset();
        // 显示模态框
        var addRootModal = new bootstrap.Modal($('#addRootCategoryModal')[0]);
        addRootModal.show();
    }

    // 保存新的一级分类
    function saveNewRootCategory() {
        var categoryName = $('#addRootCategoryName').val().trim();
        if (!categoryName) {
            alert('请输入分类名称');
            return;
        }

        var categoryData = {
            "name": categoryName,
            "parentId": 0, // 一级分类的parentId为0
            "description": $('#addRootCategoryDescription').val()
        };

        $.ajax({
            type: 'POST',
            url: '/addCategory',
            data: JSON.stringify(categoryData),
            contentType: 'application/json',
            success: function(data) {
                if (data.code === 200) {
                    alert('添加成功');
                    window.location.reload();
                } else {
                    alert('添加失败: ' + data.message);
                }
            },
            error: function() {
                alert('添加失败，请稍后重试');
            }
        });

        // 关闭模态框
        bootstrap.Modal.getInstance($('#addRootCategoryModal')[0]).hide();
    }
</script>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
